<template>
  <span>元素在小网格中的对齐方式，justify-item水平，align-items垂直</span>
  <div class="grid-1">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
    <div class="grid-item grid-item-7">7</div>
    <div class="grid-item grid-item-8">8</div>
    <div class="grid-item grid-item-9">9</div>
  </div>
  <span>place-items等价于(align-items、justify-item) 简写</span>
  <div class="grid-2">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
    <div class="grid-item grid-item-7">7</div>
    <div class="grid-item grid-item-8">8</div>
    <div class="grid-item grid-item-9">9</div>
  </div>
  <span>整个容器的对齐方式，justify-content水平，align-content垂直</span>
  <div class="grid-3">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
    <div class="grid-item grid-item-7">7</div>
    <div class="grid-item grid-item-8">8</div>
    <div class="grid-item grid-item-9">9</div>
  </div>
  <span>place-items等价于(align-content、justify-content)简写</span>
  <div class="grid-4">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
    <div class="grid-item grid-item-7">7</div>
    <div class="grid-item grid-item-8">8</div>
    <div class="grid-item grid-item-9">9</div>
  </div>
</template>
<style lang="scss" scoped>
.grid-1 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
  justify-items: start;
  align-items: end;
  div {
    width: 30px;
    height: 30px;
  }
}
.grid-2 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
  place-items: end start;
  div {
    width: 30px;
    height: 30px;
  }
}
.grid-3 {
  width: 200px;
  height: 200px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
  justify-content: space-evenly;
  align-content: space-evenly;
}
.grid-4 {
  width: 200px;
  height: 200px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
  place-content: space-evenly space-evenly;
}
</style>
